<template>
	<div class="new-brand">
		<div class="new-modal-title">	
			品牌
			<i class="ion-close-round delete" @click="genderDelete()"></i>
		</div>
		<section  ref="scrollItem">
			<ul>
				<!--内容列表循环-->
				<li v-if="all">
					<list>
						<item>
							<div @click = "allFn" class="new-brand-box"><div class="new-brand-content">所有车辆</div></div>
						</item>
					</list>
				</li>
				<li v-for="(item,val) in brand" :key="val">
					<div class="new-brand-title" ref="scrollItemTitle">{{item.initial}}</div>
					<list>
						<item v-for="(itemTow,index) in item.brandInfo" :key="index">
							<div @click = "brandInfoClick(val,index)" class="new-brand-box">
								<div class="new-brand-icon"><img :src="itemTow.brandLogo+'.r_40xh_40'"  onerror="javascript:this.src='static/images/default.png';" /></div>
								<div class="new-brand-content">{{itemTow.brandName}}</div>
							</div>
						</item>
					</list>
				</li>
			</ul>
		</section>
		<div class="new-brand-aside">
			<ul>
				<!--字母列表循环-->
				<li v-for="(item,index) in brand" ref="asideLi" @click="scrollChange(index)" :key="index">{{item.initial}}</li>
			</ul>
		</div>
		<transition name="bottom" v-for="(item,index) in paramsIs" :key="index">
			<keep-alive>
				<modalList :paramsIs = "paramsIs" :itemIndex="index"  />
			</keep-alive>
		</transition>
	</div>
</template>

<script>
	import modalList from 'src/assembly/modalList'
	import { bus } from 'bus.js'
	export default{
		data(){
			return {
				brand:[],
				paramsIs:[],
				barndInfo:{
					//品牌
					brand:{
						Id:'',
						Name:''
					},
					//车系
					series:{
						Id:'',
						Name:''
					},
					//车型
					model:{
						Id:'',
						Name:''
					}
				}
			}
		},
		components:{
			modalList
		},
		mounted(){
			this.busOn()
		},
		created(){
			window.axios.get(baseUrl+'/controller/getGroupBrand').then((res)=>{
				this.brand = res.data.result
				this.$nextTick(()=>{
					this.heightInit(this.brand.length)
					this.scrollInit()
				})
			})
		},
		computed:{
			
		},
		methods:{
			allFn(){
				this.$emit('brandCompletes')
			},
			heightInit(val){
				var a = 100/val+'%'
				for(let item of this.$refs.asideLi){
					item.style.height = a
				}
			},
			scrollInit(){	
				var titleList = this.$refs.scrollItemTitle 
				var asideList = this.$refs.asideLi
				this.$refs.scrollItem.onscroll = ()=>{
					var scrollTop = this.$refs.scrollItem.scrollTop+45
					for(let i = 0;i<titleList.length;i++){
						if(titleList[i].offsetTop<=scrollTop){
							for(let item of asideList){
								item.style.color = '#000'
							}
							asideList[i].style.color = "#FF6816"
						}
					}
				}
			},
			scrollChange(index){
				this.$refs.scrollItem.scrollTop = this.$refs.scrollItemTitle[index].offsetTop-44
			},
			genderDelete(){
//				console.log(123)
				this.$emit('brandDelete')
			},
			busOn(){
				bus.$off('brandId')
				bus.$off('seriesId')
				bus.$on('brandId',(index)=>{
					this.barndInfo.series.id = this.paramsIs[0].list[index].id
					this.barndInfo.series.name = this.paramsIs[0].list[index].name
					window.axios.get(baseUrl+'/controller/getModelList',{
						params:{
							seriesId:this.barndInfo.series.id
						}
					}).then((res)=>{
						this.paramsIs.push({
							list:[],
							title:'',
							emit:'seriesId'
						})
						for(let item of res.data.result){
							this.paramsIs[1].list.push({
								name:item.modelName,
								id:item.modelId
							})
						}
					})
				})
				bus.$on('seriesId',(index)=>{
					this.barndInfo.model.id = this.paramsIs[1].list[index].id
					this.barndInfo.model.name = this.paramsIs[1].list[index].name
					this.paramsIs = []
					this.$emit('brandComplete',this.barndInfo)
				})
			},
			brandInfoClick(val,index){

				this.barndInfo.brand.id = this.brand[val].brandInfo[index].brandId
				this.barndInfo.brand.name = this.brand[val].brandInfo[index].brandName
				if(this.params){
					this.$emit('brandCompletes',{id:this.barndInfo.brand.id,name:this.barndInfo.brand.name})
					return 
				}
				window.axios.get(baseUrl+'/controller/getSeriesList',{
					params:{
						brandId:this.barndInfo.brand.id
					}
				}).then((res)=>{
//					console.log(res)
					this.paramsIs.push({
						list:[],
						title:'',
						emit:'brandId'
					})
					for(let item of res.data.result){
						this.paramsIs[0].list.push({
							name:item.seriesName,
							id:item.seriesId
						})
					}
				})
				
			}
		},
		props:[
			'params','all'
		]
	}
</script>

<style>
	.new-brand{ background: #E1E1E1; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; overflow: hidden;}
	.new-brand .new-modal-title{ z-index: 2; position: relative; z-index: 999;}
	.new-brand .delete{ z-index: 9999999;}
	.new-brand section{ position: absolute; width: 100%; height: 100%; overflow: hidden; padding-top: 44px; top: 0; left: 0; overflow-y: auto; z-index: 1;}
	.new-brand ul{ }
	.new-brand li{}
	.new-brand-title{ padding: 5px 16px;}
	.new-brand-icon{ display: inline-block; vertical-align: top; font-size: 0; height: 40px;} 
	.new-brand-icon img{ width: 40px; height: 40px;}
	.new-brand-content{ display: inline-block; vertical-align: top;padding-left: 15px; height: 40px; line-height: 40px;}
	.grade-a .new-brand .item{padding: 8px 16px; background: #EEEEEE; border-color: #E1E1E1; line-height:40px;}
	.new-brand-aside{ position: fixed; right: 0; top: 0; z-index: 99; padding-top: 54px; width: 40px; text-align: center; height: 100%;}
	.new-brand-aside ul{ position: relative; height: 100%;}
	.new-brand-aside li{display: block; position: relative;}
	.new-brand-box{}
</style>